<template>
  <div v-if="infoData" class="workload paddingBottom">
    <div class="workload-head">
      <div class="title">{{ infoData.leader_name }}</div>
      <div class="desc-box">
        <div class="desc">{{ infoData.plate_name }}</div>
        <div class="desc">{{ infoData.system_name }}</div>
      </div>
    </div>
    <div class="workload-content">
      <van-cell-group>
        <van-field
          v-if="infoData.is_mine == 1 && isAssessmentNode"
          v-model="infoData.implement_content"
          label="实施内容"
          input-align="right"
          label-class="labelColor"
          @click="getOption(1)"
          placeholder="实施内容"
          is-link
          readonly
          arrow-direction="down"
        />
        <van-field
          v-else
          v-model="infoData.implement_content"
          label="实施内容"
          label-width="4em"
          input-align="right"
          label-class="labelColor"
          placeholder="实施内容"
          readonly
        />
        <van-field
          v-model="infoData.function_name"
          label="功能名称"
          label-class="labelColor"
          input-align="right"
          placeholder="请输入功能名称"
          @input="saveData"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
        <van-field
          v-if="infoData.is_mine == 1 && isAssessmentNode"
          v-model="infoData.source_type"
          label="资源类型"
          label-class="labelColor"
          @click="getOption(2)"
          input-align="right"
          placeholder="资源类型"
          is-link
          readonly
          arrow-direction="down"
        />
        <van-field
          v-else
          v-model="infoData.source_type"
          label="资源类型"
          label-width="4em"
          input-align="right"
          label-class="labelColor"
          placeholder="资源类型"
          readonly
        />
        <van-field
          v-if="infoData.is_mine == 1 && isAssessmentNode"
          v-model="infoData.manufacturer"
          label="厂商"
          label-class="labelColor"
          @click="getOption(3)"
          input-align="right"
          placeholder="厂商"
          is-link
          readonly
          arrow-direction="down"
        />
        <van-field
          v-else
          v-model="infoData.manufacturer"
          label="厂商"
          input-align="right"
          label-class="labelColor"
          placeholder="厂商"
          readonly
        />
        <van-field
          v-model="infoData.price"
          label="单价（万元）"
          label-class="labelColor"
          input-align="right"
          placeholder="请输入单价（万元）"
          @input="saveData"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
        <van-field
          v-if="infoData.is_mine == 1 && isAssessmentNode"
          v-model="infoData.workflow"
          label="预计人月"
          label-class="labelColor"
          is-link
          readonly
          @click="anticipated"
          input-align="right"
          placeholder="预计人月"
        />
        <van-field
          v-else
          v-model="infoData.workflow"
          label="预计人月"
          input-align="right"
          label-class="labelColor"
          placeholder="预计人月"
          readonly
        />
        <van-field
          v-model="infoData.estimate_it_amount"
          label="预计IT投入（万元）"
          label-class="labelColor"
          label-width="9.2em"
          input-align="right"
          placeholder="请输入预计IT投入（万元）"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
        <van-field
          v-model="infoData.project_number"
          label="项目编号"
          label-class="labelColor"
          input-align="right"
          placeholder="请输入项目编号"
          @input="saveData"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
        <van-field
          v-model="infoData.cycle"
          label="实施周期（月）"
          label-class="labelColor"
          label-width="7.2em"
          input-align="right"
          placeholder="请输入实施周期（月）"
          @input="saveData"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
        <van-field
          v-if="infoData.is_mine == 1 && isAssessmentNode"
          v-model="infoData.start_date"
          is-link
          label-class="labelColor"
          readonly
          arrow-direction="down"
          label="预计启动时间"
          @click="getDate(1)"
          input-align="right"
          placeholder="请选择预计启动时间"
        />
        <van-field
          v-else
          v-model="infoData.start_date"
          label="预计启动时间"
          label-width="6em"
          input-align="right"
          label-class="labelColor"
          placeholder="预计启动时间"
          readonly
        />
        <van-field
          v-if="infoData.is_mine == 1 && isAssessmentNode"
          v-model="infoData.check_date"
          is-link
          readonly
          label-class="labelColor"
          arrow-direction="down"
          label="预计提交验收时间"
          label-width="8.2em"
          @click="getDate(2)"
          input-align="right"
          placeholder="请选择预计提交验收时间"
        />
        <van-field
          v-else
          v-model="infoData.check_date"
          label="预计提交验收时间"
          label-width="8.2em"
          input-align="right"
          label-class="labelColor"
          placeholder="预计提交验收时间"
          readonly
        />
        <van-cell center title="大文件传输">
          <template #right-icon>
            <van-switch
              v-model="infoData.is_big_file"
              size="24"
              @change="saveData"
              :disabled="infoData.is_mine == 0 || !isAssessmentNode"
            />
          </template>
        </van-cell>
        <van-cell center title="互联网访问">
          <template #right-icon>
            <van-switch
              v-model="infoData.is_net"
              size="24"
              @change="saveData"
              :disabled="infoData.is_mine == 0 || !isAssessmentNode"
            />
          </template>
        </van-cell>
        <van-cell center title="被互联网访问">
          <template #right-icon>
            <van-switch
              v-model="infoData.is_netted"
              size="24"
              @change="saveData"
              :disabled="infoData.is_mine == 0 || !isAssessmentNode"
            />
          </template>
        </van-cell>
        <van-cell center title="与第三方对接">
          <template #right-icon>
            <van-switch
              v-model="infoData.is_other"
              size="24"
              @change="saveData"
              :disabled="infoData.is_mine == 0 || !isAssessmentNode"
            />
          </template>
        </van-cell>
        <van-field
          label-class="labelColor"
          v-model="infoData.data_save_request"
          label="数据储存需求"
          input-align="right"
          placeholder="请输入数据存储需求"
          @input="saveData"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
        <van-field
          v-model="infoData.reliable_request"
          label="可靠性要求"
          label-class="labelColor"
          input-align="right"
          placeholder="请输入可靠性要求"
          @input="saveData"
          :readonly="infoData.is_mine == 0 || !isAssessmentNode"
        />
      </van-cell-group>
      <van-popup position="bottom" get-container="body" v-model="showOption">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirmOption"
          @cancel="showOption = false"
        />
      </van-popup>
      <van-calendar
        v-model="show"
        :show-confirm="false"
        color="#009966"
        @confirm="onConfirm"
      />
    </div>
    <div v-if="infoData.is_mine == 1 && isAssessmentNode" class="form-btn">
      <!-- <div></div> -->
      <button v-if="!isAdd" class="btn btn-color1" @click="handleDeleteOpera">
        删除
      </button>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div @click="save" class="btn btn-color3">保存</div>
    </div>
    <goback></goback>
  </div>
</template>
<script>
import {
  workAssessDetail,
  workAssessSave,
  addWorkAssess,
  implementation,
  resources,
  manufacturer,
  workAssessDel,
} from "@/api/service.js";
import { Toast } from "vant";
import Goback from "@/components/goback.vue";
export default {
  components: {
    Goback,
  },
  data() {
    return {
      id: "", //工作量评估列表id
      server_id: "", //服务单id
      wordload: {
        realTime: "", //实施内容
        functionName: "", //功能名称
        resourceType: "", //资源类型
        manufacturer: "", //厂商
        univalence: "", //单价（万元）
        expected: "", //预计人月
        invested: "", //预计IT投入（万元）
        projectNumber: "", //项目编号
        RealTimeCycle: "", //实施周期（月）
        // date1: "", //预计联调时间
        date2: "", //预计启动时间
        date3: "", //预计提交验收时间
        checked1: false, //大文件传输
        checked2: false, //互联网访问
        checked3: false, //被互联网访问
        checked4: false, //与第三方对接
        dataStorage: "", //数据储存需求
        reliability: "", //可靠性要求
      },
      infoData: {},
      show: false,
      num: 1,
      showOption: false,
      optionData: "",
      columns: [],
      type: 1,
      resourcesList: "", //资源类型
      manufacturerList: "", //厂商
      isAdd: false, //是否是复制创建
      isAssessmentNode: false, //是否是工作量评估节点
    };
  },
  mounted() {
    console.log(this.$route.query.isAssessmentNode);
    this.id = this.$route.query.id; //工作量评估列表id
    this.isAdd = this.$route.query.isAdd == "true" ? true : false; //是否是复制创建
    this.server_id = this.$route.query.server_id; //服务单id
    this.isAssessmentNode =
      this.$route.query.isAssessmentNode == 1 ? true : false; //是否是工作量评估节点
    if (localStorage.getItem("infoData")) {
      this.infoData = eval("(" + localStorage.getItem("infoData") + ")");
      if (localStorage.getItem("resData")) {
        let resData = eval("(" + localStorage.getItem("resData") + ")");
        this.infoData.workflow = resData.workflow;
        this.infoData.estimate_it_amount = resData.estimate_it_amount;
      }
    } else {
      this.getData();
    }
  },
  methods: {
    // 删除
    handleDeleteOpera() {
      workAssessDel({
        assess_id: this.id,
        server_id: this.server_id,
      }).then((res) => {
        console.log(res);
        Toast(res.message);
        if (res.status == "success") {
          this.$router.back();
        }
      });
    },

    //时间
    getDate(num) {
      this.num = num;
      this.show = true;
    },
    onConfirm(value) {
      if (this.num == 1) {
        this.infoData.start_date = this.formatDate(value);
      } else if (this.num == 2) {
        this.infoData.check_date = this.formatDate(value);
      }
      this.saveData();
      this.show = false;
    },
    formatDate(date) {
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return `${date.getFullYear()}-${month}-${day}`;
    },
    //获取数据
    getData() {
      workAssessDetail({
        assess_id: this.id,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.infoData = res.data;
          // this.wordload.realTime = res.data.implement_content;
          // this.wordload.functionName = res.data.function_name;
          // this.wordload.resourceType = res.data.source_type;
          // this.wordload.manufacturer = res.data.manufacturer;
          // this.wordload.univalence = res.data.price;
          // this.wordload.expected = res.data.workflow;
          // this.wordload.invested = res.data.estimate_it_amount;
          // this.wordload.projectNumber = res.data.project_number;
          // this.wordload.RealTimeCycle = res.data.cycle;
          // this.wordload.date2 = res.data.start_date;
          // this.wordload.date3 = res.data.check_date;
          // this.wordload.checked1 = res.data.is_big_file;
          // this.wordload.checked2 = res.data.is_net;
          // this.wordload.checked3 = res.data.is_netted;
          // this.wordload.checked4 = res.data.is_other;
          // this.wordload.dataStorage = res.data.data_save_request;
          // this.wordload.reliability = res.data.reliable_request
          console.log(this.isAdd);
          if (this.isAdd) {
            this.infoData.implement_content = "";
            this.infoData.function_name = "";
            this.infoData.source_type = "";
            this.infoData.manufacturer = "";
            this.infoData.price = "";
            this.infoData.workflow = "";
            this.infoData.estimate_it_amount = "";
            this.infoData.project_number = "";
            this.infoData.cycle = "";
            this.infoData.start_date = "";
            this.infoData.check_date = "";
            this.infoData.is_big_file = false;
            this.infoData.is_net = false;
            this.infoData.is_netted = false;
            this.infoData.is_other = false;
            this.infoData.data_save_request = "";
            this.infoData.reliable_request = "";
          }
          console.log(this.infoData);
          this.saveData();
        }
      });
    },
    saveData() {
      localStorage.setItem("infoData", JSON.stringify(this.infoData));
    },
    getOption(type) {
      this.columns = [];
      this.type = type;
      if (type == 1) {
        implementation().then((res) => {
          console.log(res);
          if (res.status == "success") {
            this.optionData = res.data;
            for (var i = 0; i < res.data.length; i++) {
              this.columns.push(res.data[i].value);
            }
          }
          this.showOption = true;
        });
      } else if (type == 2) {
        resources().then((res) => {
          console.log(res);
          if (res.status == "success") {
            this.resourcesList = res.data;
            for (var i = 0; i < res.data.length; i++) {
              this.columns.push(res.data[i].value);
            }
          }
          this.showOption = true;
        });
      } else if (type == 3) {
        let type_id = ""; //资源类型id
        if (this.infoData.source_type) {
          for (var i = 0; i < this.resourcesList.length; i++) {
            if (this.infoData.source_type == this.resourcesList[i].value) {
              type_id = this.resourcesList[i].id;
            }
          }
        }
        manufacturer({
          type_id: type_id,
          system_id: this.infoData.system_id,
        }).then((res) => {
          console.log(res);
          this.manufacturerList = res.data;
          for (var i = 0; i < res.data.length; i++) {
            this.columns.push(res.data[i].value);
          }
          this.showOption = true;
        });
      }
    },
    onConfirmOption(value) {
      let index = this.columns.indexOf(value);
      if (this.type == 1) {
        this.infoData.implement_content = value;
        this.infoData.implement_comment_id = this.optionData[index].id;
      } else if (this.type == 2) {
        this.infoData.source_type = value;
        this.infoData.source_type_id = this.resourcesList[index].id;
      } else if (this.type == 3) {
        this.infoData.manufacturer = value;
        for (var i = 0; i < this.manufacturerList.length; i++) {
          if (value == this.resourcesList[i].value) {
            this.infoData.manufacturer_id = this.resourcesList[i].id;
          }
        }
      }
      this.saveData();
      this.showOption = false;
    },
    //预计人月
    anticipated() {
      this.$router.push({
        path: "/service/features",
        query: {
          server_id: this.server_id,
          implement_comment_id: this.infoData.implement_comment_id,
          system_id: this.infoData.system_id,
          function_name: this.infoData.function_name,
          assess_id: this.id,
        },
      });
    },

    //保存
    save() {
      // 保障人力型不可以为空
      if (this.infoData.source_type == "保障人力型") {
        if (!/\P[0-9]{4}/.test(this.infoData.project_number)) {
          Toast("项目编号格式不正确");
          return;
        }
      } else {
        if (
          this.infoData.project_number != "" &&
          !/\P[0-9]{4}/.test(this.infoData.project_number)
        ) {
          Toast("项目编号格式不正确");
          return;
        }
      }

      this.infoData.assess_id = this.id; //工作量评估id
      this.infoData.implement_content_id = this.infoData.implement_comment_id; //实施类型id
      this.infoData.is_net = this.infoData.is_net == true ? 1 : 0;
      this.infoData.is_big_file = this.infoData.is_big_file == true ? 1 : 0;
      this.infoData.is_netted = this.infoData.is_netted == true ? 1 : 0;
      this.infoData.is_other = this.infoData.is_other == true ? 1 : 0;
      console.log(this.isAdd);
      if (this.isAdd == true) {
        addWorkAssess(this.infoData).then((res) => {
          if (res.status == "success") {
            Toast(res.message);
            localStorage.removeItem("infoData");
            localStorage.removeItem("resData");
            this.$router.back();
          }
        });
      } else {
        workAssessSave(this.infoData).then((res) => {
          if (res.status == "success") {
            Toast(res.message);
            localStorage.removeItem("infoData");
            localStorage.removeItem("resData");
            this.$router.back();
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.workload {
  min-height: 100vh;
  background: #f7f9f9;
  &.paddingBottom {
    padding-bottom: 60px;
    box-sizing: border-box;
  }
  .workload-head {
    display: flex;
    height: 90px;
    background: #009966;
    padding: 0 15px;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 19px;
    }
    .desc-box {
      height: auto;
      text-align: right;
    }
    .deac {
      font-size: 14px;
    }
  }
  .workload-content {
    margin-top: 10px;
    margin-bottom: 80px;
    background: #fff;
    /deep/.labelColor {
      color: rgba(49, 53, 65, 0.6);
    }
    /deep/.van-cell__title {
      color: rgba(49, 53, 65, 0.6);
    }
    /deep/.van-field__control {
      color: #313541;
    }
  }
}

.form-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 34px;
  padding: 13px 15px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  .btn {
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    border-radius: 5px;
    border: none;
    box-shadow: none;
    &:last-child {
      margin-right: 0;
    }
  }
  .btn-color1 {
    background: #ebedf0;
    color: #011445;
  }
  .btn-color3 {
    background: #009966;
    color: #fff;
  }
}
</style>